<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="哈哈大王">
		<meta name="Keywords" content="八卦">
		<meta name="Description" content="渐变色练习、八卦">
		<title>八卦</title>
		<style>
		    *{margin:0px;
			   padding:0px;
			   list-style:none;}

		     .box1{width:500px;
			 height:500px;
			 margin:50px auto;
			 border:100px solid #ccc;
			 border-radius:50px;
			  background-color:#ccc;
			 /* background-image:
			 radial-gradient(circle at 20px,red 0%,red 20%,blue 0%,blue 40%); */
			 }
			 .box2{width:500px;
			 height:500px;  background-color:snow;
			 background-image:			
			 radial-gradient(circle at 125px,snow 0%,snow 3%,black 0%,black 28%,transparent 0%,transparent 100%),
			 radial-gradient(circle at 375px,black 0%,black 3%,snow 0%,snow 28%,transparent 0%,transparent 100%),
			 linear-gradient(black 0%,black 50%,snow 0%,snow 100%);
			  
			 /* border:100px solid snow; */
			 border-radius:50%;}
		</style>
	</head>
	<body>
	<div class="box1">
	      <div class="box2"></div>
	<div>

		
	</body>
</html>
